<template>
  <!-- VIP礼包 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="VIP礼包" width="50%" :before-close="handleClose" top="100px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="mailForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='vip_level'" label="" prop="vip_level">
              <el-input-number :min="0" :max="999999999" :precision="0" v-model="formParams.vip_level" controls-position="right" clearable placeholder="请输入VIP等级" />
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='gift_type'" label="" prop="gift_type">
              <el-select v-model="formParams.gift_type" placeholder="请选择礼包类型" filterable >
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in GIFT_TYPE" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='price'" label="" prop="price">
              <el-input-number :min="0" :max="999999999999" :precision="0" v-model="formParams.price" controls-position="right" clearable placeholder="请输入礼包购买价格" style="width: 240px;"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='limit_buy_num'" label="" prop="limit_buy_num">
              <el-input-number :min="1" :max="999999999999" :precision="0" v-model="formParams.limit_buy_num" controls-position="right" clearable placeholder="请输入礼包购买次数限制"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='buy_num'" label="" prop="buy_num">
              <el-input-number :min="1" :max="999999999999" :precision="0" v-model="formParams.buy_num" controls-position="right" clearable placeholder="请输入礼包购买卢比数量" style="width: 240px;"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='send_num'" label="" prop="send_num">
              <el-input-number :min="0" :max="999999999999" :precision="0" v-model="formParams.send_num" controls-position="right" clearable placeholder="请输入礼包赠送卢比数量" style="width: 240px;"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='is_online'" label="" prop="is_online">
              <el-radio-group v-model="formParams.is_online">
                <el-radio-button :label="1">上线</el-radio-button>
                <el-radio-button :label="0">隐藏</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('mailForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addVipGift,
  editVipGift
} from "@/api/game";
import {
  GIFT_TYPE
} from '@/utils/enum'
export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      GIFT_TYPE,
      isShow: false,
      itemData:[
        { label: 'VIP等级', key: 'vip_level' ,pass:true},
        { label: '礼包类型', key: 'gift_type' },
        { label: '礼包价格', key: 'price' ,pass:true},
        { label: '购买限制次数', key: 'limit_buy_num' ,pass:true},
        { label: '购买卢比数量', key: 'buy_num' ,pass:true},
        { label: '赠送卢比数量', key: 'send_num' ,pass:true},
        { label: '是否上线', key: 'is_online' },
      ],
      formParams: {
        vip_level: 0, //vip等级
        gift_type: 1, //礼包类型
        buy_num: '', //购买卢比数量
        send_num: '', //赠送卢比数量
        price: '', //价格
        limit_buy_num: '', //购买限制
        is_online: 1 //1是上线 0是未上线
      },
      ruleForm: {
        vip_level: [{ required: true, trigger: 'blur', message: '请输入礼包等级', }],
        buy_num: [{ required: true, trigger: 'blur', message: '请输入礼包购买卢比数量', }],
        send_num: [{ required: true, trigger: 'blur', message: '请输入礼包赠送卢比数量', }],
        price: [{ required: true, trigger: 'blur', message: '请输入礼包购买价格', }],
        limit_buy_num: [{ required: true, trigger: 'blur', message: '请输入购买次数限制', }],
      },
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
      } else {
        that.formParams = {
          vip_level: 0,
          gift_type: 1,
          buy_num: '',
          send_num: '',
          price: '',
          limit_buy_num: '',
          is_online: 1 
        }
      }
    },
  },
  mounted () {},
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this,
      params = JSON.parse(JSON.stringify(that.formParams));
      params.price=that.$public.mathNumberMultiply(params.price,10000)
      params.buy_num=that.$public.mathNumberMultiply(params.buy_num,10000)
      params.send_num=that.$public.mathNumberMultiply(params.send_num,10000)
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if (!params.id) {
            addVipGift(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            editVipGift(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">

</style>
